<%@ page language="java" pageEncoding="utf-8" %>
<%
    
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title></title>
	<script type="text/javascript" src="../pageoffice.js"></script>
    <script type="text/javascript">
        function ConvertFile() {
			document.getElementById("Button1").disabled = true;
			
            CallFileMaker({
                url: "FileMakerSingle.jsp",
                success: function () {
                    console.log("completed successfully.");
                    setProgress(100);
                },
                progress: function (pos) {
                    console.log("running "+pos+"%");
                    setProgress(pos);
                },
                error: function (msg) {
                    console.log("error occurred: "+msg);
                }
            });
        }
		
		function setProgress(percent) {
			var progressBar = document.getElementById("progressBar");
			progressBar.style.width = percent + '%';
			progressBar.innerText = percent + '%';
		}
    </script>
	<style>
		#progressBarContainer {
		  width: 500px;
		  background-color: #e0e0e0;
		  border-radius: 5px;
		  padding: 3px;
		  margin: 10px auto;
		}

		#progressBar {
		  height: 20px;
		  width: 0%;
		  background-color: #76b900;
		  border-radius: 5px;
		  text-align: center;
		  line-height: 20px; /* 使文字垂直居中 */
		  color: white;
		}
	</style>
</head>
<body>
    <div style="text-align: center;">
        <h3 style="margin:20px;">演示：模拟后台填充数据到Word模板生成文件的效果</h3>
		<div style="width:650px;margin: 0 auto; font-size:14px;">
			<p style="text-align: left;">
				演示内容：<br/>
				&nbsp;&nbsp;&nbsp;&nbsp;本示例演示了调用FileMaker对象在客户端动态生成Word文件并自动保存到服务器上，却不显示打开文件界面的功能，模拟了直接在服务器端填充数据到Word模板生成文件的效果。
			</p>
			<p style="text-align: left;">
				操作说明：<br/>
				&nbsp;&nbsp;&nbsp;&nbsp;1. 点击“生成Word文件”按钮，执行动态填充数据到荣誉证书模板“template.doc”的程序，生成一份真正的荣誉证书文件。<br/>
				&nbsp;&nbsp;&nbsp;&nbsp;2. 生成完毕后，即可在“FileMakerSingle/doc”目录下看到生成的Word文件：maker.doc。
			</p>
		</div>	
        <input id="Button1" type="button" value="生成Word文件" onclick="ConvertFile()"/>
		<div id="progressBarContainer">
		  <div id="progressBar"></div>
		</div>
    </div>
</body>
</html>